<template>
	<view>
		<v-tabs activeColor="#077B86" lineColor="#077B86" lineHeight="6rpx" :scroll="false"
			v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
			<view class="uni-margin-wrap">
				<view class="mdx-date-tiem" >
					<view class="zy-row mdx-datetime" @click="show=true">
						<text>{{date}}</text>
						<image src="/static/Input_icon_down.png"></image>
					</view>
					<view v-if="current==1" class="zy-row mdx-txt">
						<text>*{{ formatDate(value1, "week")}}</text>
						<text>({{ formatDate(value1, "weekDayStart")}})</text>
						<text>～</text>
						<text>{{ formatDate(value1)}}</text>
						<text>({{ formatDate(value1, "weekDayEnd")}})</text>
					</view>
				</view>
				<view class="zy-row zy-row-item">
					<view class="zy-row mdx-text-item">
						<text class="mdx-text-left">销售金额：</text>
						<text class="mdx-text-right">￥10080.55</text>
					</view>
					<view class="zy-row mdx-text-item">
						<text class="mdx-text-left">到账金额：</text>
						<text class="mdx-text-right">￥10080.55</text>
					</view>
				</view>
				<view class="zy-row zy-row-item">
					<view class="zy-row mdx-text-item">
						<text class="mdx-text-left">本人收益：</text>
						<text class="mdx-text-right">￥10080.55</text>
					</view>
					<view class="zy-row mdx-text-item">
						<text class="mdx-text-left">出货数量：</text>
						<text class="mdx-text-right">10080</text>
					</view>
				</view>
				<view class="zy-row zy-row-item">
					<view class="zy-row mdx-text-item " style="width: 100%;">
						<text class="mdx-text-left">订单数量：</text>
						<text class="mdx-text-right">15550</text>
					</view>
				</view>
			</view>
			
			<u-datetime-picker
			ref="datetimePicker"
				:show="show"
				v-model="value1"
				mode="date"
				closeOnClickOverlay
				@confirm="confirm"
				@cancel="show=false"
				@close="show=false"
			></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				tabs: ['日销售统计','七日统计','月统计'],
				show: false,
				value1: Number(new Date()),
				date:""
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.date = uni.$u.date(new Date().getTime(), 'yyyy-mm-dd');
		},
		methods:{
			changeTab(index) {
				console.log('当前选中的项：' + index)
			},
			changeTab1({detail:{current}}){
				console.log("当前选中的项1",current)
			},
			confirm({value}){
				this.date = uni.$u.date(value, 'yyyy-mm-dd');
				this.show=false
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			/**
			 * @param {String} date 一个时间字符串
			 * @param {String} type 区分处理操作
			 *  将date根据type转换成yyyy-MM-dd 或者 yyyy-M 或者其他格式*/
			formatDate(date, type){
			  let d = new Date(date);
			  if (type === "week") d = new Date(d - 6 * 24 * 60 * 60 * 1000);
			  const Y = d.getFullYear();
			  let M = d.getMonth() + 1;
			  M = M < 10 ? `0${M}` : M;
			  let D = d.getDate();
			  D = D < 10 ? `0${D}` : D;
			  if (type === "month") return `${Y}-${M}`;
			
			  if (type === "weekDayStart" || type == "weekDayEnd") {
			    if (type == "weekDayStart") d = new Date(d - 6 * 24 * 60 * 60 * 1000);
			    let weekDay = d.getDay();
			    switch (weekDay) {
			      case 0:
			        weekDay = `周日`;
			        break;
			      case 1:
			        weekDay = `周一`;
			        break;
			      case 2:
			        weekDay = `周二`;
			        break;
			      case 3:
			        weekDay = `周三`;
			        break;
			      case 4:
			        weekDay = `周四`;
			        break;
			      case 5:
			        weekDay = `周五`;
			        break;
			      case 6:
			        weekDay = `周六`;
			        break;
			    }
			    return weekDay;
			  }
			  return `${Y}-${M}-${D}`;
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-color: #F9F9F9;
	}
	
	.uni-margin-wrap{
		width: 100%;
		height: 100vh;
		swiper{
			width: 100%;
			height: 100vh;
		}
	}
	
	.zy-row-item{
		margin-top: 20rpx;
		justify-content: space-between;
		.mdx-text-item{
			width: 364rpx;
			height: 96rpx;
			background-color: #fff;
			padding: 26rpx 0rpx;
			padding-left: 30rpx;
			background: #FFFFFF;
			.mdx-text-left{
				font-size: 28rpx;
			}
			
			.mdx-text-right{
				font-size: 28rpx;
				font-weight: 600;
			}
		}
	}
	
	
	
	.mdx-date-tiem{
		background-color: #fff;
		padding: 24rpx 20rpx;
		.mdx-datetime{
			background: #F9F9F9;
			padding: 24rpx 20rpx;
			border-radius: 12rpx;
			align-items: center;
			justify-content: space-between;
			image{
				width: 44rpx;
				height: 44rpx;
			}
			text{
				font-size: 28rpx;
			}
		}
		.mdx-txt{
			margin-top: 16rpx;
			padding: 0 42rpx;
			text-align: right;
			color: #FF2A44;
			font-size: 18rpx;
			justify-content: flex-end;
			text{
				margin: 0 4rpx;
			}
		}
	}
	
	
</style>
